<template>
	<view class="content">
		<!-- 距离顶部的距离 刚好留出状态栏即可 即statusBarHeight -->
		<view class="topNav" :style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }">
			<view class="nav-left"> hhh </view>
			<view class="nav-search">
				<input type="text" placeholder="请搜索" placeholder-class="placClass" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'h-header',
		data() {
			return {
				navHeight: '', // 导航栏高度
				statusBarHeight: '', // 状态栏高度
			}
		},
		onLoad() {
			//获取手机系统的信息 里面有状态栏高度和设备型号
			let {
				statusBarHeight,
				system
			} = uni.getSystemInfoSync()
			// 注意返回的单位是px 不是rpx
			console.log('状态栏高度是', statusBarHeight + 'px', '设备型号是', system)
			this.statusBarHeight = statusBarHeight
			// 而导航栏的高度则 = 状态栏的高度 + 判断机型的值（是ios就+40，否则+44）
			// 这个高度刚好和胶囊对齐
			this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 40 : 44)
			console.log(this.navHeight, '导航栏高度')
		},

		methods: {},
	}
</script>

<style scoped>
	.topNav {
		height: 100rpx;
		background-color: #00aa7f;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.nav-left {
		font-size: 36rpx;
		font-weight: 600;
		color: #ffeb3b;
		margin-right: 30rpx;
		font-style: italic;
	}

	.nav-search input {
		width: 60%;
		height: 62rpx;
		border-radius: 30rpx;
		padding-left: 25rpx;
		background-color: #f0f8ffa6;
		box-sizing: border-box;
	}

	.placClass {
		font-size: 24rpx;
		color: #fff;
	}
</style>